<template>
  <a-row class="index_right_top panel_box">
    <div class="title">常用功能</div>
    <a-col
      :span="12"
      class="usedFunction"
      v-for="(item, index) in useFunList"
      :key="index"
    >
      <div class="icon_box">
        <img :src="item.img" alt="" />
      </div>
      <div class="text_box">
        <p class="tit">{{ item.tit }}</p>
        <span class="describe">{{ item.describe }}</span>
      </div>
    </a-col>
  </a-row>
</template>

<script>
export default {
  data() {
    return {
      useFunList: [
        {
          tit: "组织因子库",
          describe: "首页",
          img: require("@/assets/img/ico1/Wallet@3x.png"),
        },
        {
          tit: "产品碳足迹",
          describe: "产品碳足迹",
          img: require("@/assets/img/ico1/Wallet@3x.png"),
        },
        {
          tit: "零碳课堂",
          describe: "零碳课堂",
          img: require("@/assets/img/ico1/Wallet@3x.png"),
        },
        {
          tit: "碳排放核算",
          describe: "企业碳核算",
          img: require("@/assets/img/ico1/Wallet@3x.png"),
        },
      ],
    };
  },
};
</script>

<style lang="scss">
.title {
  display: flex;
  font-size: 14px;
  font-weight: 600;
}
.panel_box {
  background: #fff;
  padding: 10px;
  border-radius: 5px;
}
.index_right_top {
  margin-bottom: 10px;
  .usedFunction {
    display: flex;
    flex-direction: row;
    align-items: center;
    .icon_box {
      width: 80px;
      img {
        width: 100%;
      }
    }
    .text_box {
      text-align: left;
      .tit {
        font-size: 14px;
        color: #333;
        margin: 0;
      }
      .describe {
        font-size: 12px;
        color: #999;
      }
    }
  }
}
</style>